<template>
    <div class="box">
        <p class="title">{{typeObj[type]}}</p>
        <ul class="content-box">
            <li v-for="book in books" :key="book.id" >
                <img :src="book.img">
                <p>{{book.name}}</p>
                <p>¥:{{book.price}}</p>
            </li>
        </ul>
    </div>
</template>
<script>

import $ from "jquery";

export default {
    name:"Books",
    props:{
        type:String
    },
    data(){
        return {
          typeObj:{
              "hot":"热卖",
              "new":"最新"
          },
          books:[]
        }
    },
    created(){
        
        $.ajax({
            url:"http://localhost:3000/books?type="+this.type,
            success:(data)=>{
                console.log("data",data);
                this.books = data;
            }
            // type:"json"
        });

    }    
}
</script>


<style scoped>

.box{
    width: 100%;
    height: 1.6rem;
}

.title{
    width: 1rem;
    height: 0.4rem;
    background-color: pink;
}

.content-box{
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
}

.content-box li{
    flex: 1;
    border:1px solid pink;
}

.content-box img{
    width: 100%;
    height:0.7rem;

}

.content-box p{
    text-align: center;
    height: 0.25rem;
}

</style>


